<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ手机版</title>
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>

<body>
    <!-- banner部分start-->
    <div class="czm_banner">
        <div class="czm_content w">
            <div class = "czm_banner_left fl">
                <img src="images/mblogo.png" alt=""/>
            </div>
            <div class = "czm_banner_right fr ">
                <div>
                    <ul>
                        <li class="fl"><a href="#">登录</a></li>
                        <li class="fr"  id="czm_more">
                            <a href="#">更多</a><b>☰</b>
                        </li>
                    </ul>
                </div>
                <div class="hide" id="czm_div">
                    <ul class=" czm_more_content">
                        <li><a href="#">QQ官网首页</a></li>
                        <li><a href="#">产品下载</a></li>
                        <li><a href="#">功能介绍</a></li>
                        <li><a href="#">QQ会员</a></li>
                        <li><a href="#">安全中心</a></li>
                        <b></b>
                    </ul>
                </div>

            </div>
            <div class="czm_re"><h3>精彩功能推荐</h3></div>

        </div>
    </div>
    <!-- banner部分end-->

    <!--content部分start -->
    <div class="czm_all" id="czm_box">
        <div class="czm_screen">
            <ul id="czm_ul">
                <li><img src="images/01video.png"/></li>
                <li><img src="images/02friends.png"/></li>
                <li><img src="images/03talkingshow.png"/></li>
                <li><img src="images/04search.png"/></li>
                <li><img src="images/05talkingroom.png"/></li>
                <li><img src="images/06discuss.png"/></li>
                <li><img src="images/07news.png"/></li>
                <li><img src="images/08flowers.png"/></li>
                <li><img src="images/09notes.png"/></li>
                <li><img src="images/10money.png"/></li>
                <li><img src="images/11weather.png"/></li>
                <li><img src="images/12school.png"/></li>
            </ul>
        </div>
        <div id="czm_arr"><span id="czm_left">&lt;</span><span id="czm_right">&gt;</span></div>
    </div>
    <!--content部分end -->

    <!-- bottom部分start-->
    <div class="czm_bottom">
        <div ><a href="#">查看更多功能</a></div>
    </div>
    <!-- bottom部分end-->

    <!-- footer部分start-->
    <div class="czm_footer">
        <p>Copyright © 1998-2016 Tencent.All Rights Reserved</p>
        <p>腾讯公司 版权所有</p>
    </div>
    <!-- footer部分end-->
    <script src="animate.js"></script>
    <script>
        var czm_more = document.getElementById("czm_more");
        var czm_div = document.getElementById("czm_div");
        czm_more.onmouseover= function () {
            czm_div.className = "show";
        }
        czm_more.onmouseout= function () {
            czm_div.className = "hide";
        }


        var czm_index = 0;
        //设置图片的宽度
        var czm_ul = document.getElementById("czm_ul");
        var czm_count = czm_ul.children.length;
        //记录图片的宽度
        var czm_box= document.getElementById("czm_box");
        var czm_screen = czm_box.children[0];
        var czm_imgWidth = czm_screen.offsetWidth;
        var czm_right=document.getElementById("czm_right");
        var czm_left=document.getElementById("czm_left");
        var czm_box = document.getElementById("czm_box");
        //当鼠标经过czm_box时清除定时器 当离开时开启定时器
        czm_box.onmouseover = function () {
            clearInterval(czm_timerId)
        }
        czm_box.onmouseout = function () {
            czm_timerId = setInterval(function () {
                czm_right.click()
            },2500)
        }
        //点击czm_right让图片进入下一张
        czm_right.onclick = function () {
            //如果当前是最后一张克隆的图，让index=0，并且切换到ul的第一张图片
            if(czm_index===czm_count){
                czm_index = 0;
                czm_ul.style.left = "0px";
            }
            czm_index++;
            animate(czm_ul,-czm_index*czm_imgWidth)
        }

        //点击czm_left让图片进入上一张
        czm_left.onclick= function () {
            //若果当前是第一张图片，让index=最后一张克隆图片的索引，切换到克隆的图片
            if(czm_index===0){
                czm_index = czm_count;
                czm_ul.style.left = -czm_index*czm_imgWidth+"px";
            }
            czm_index--;
            animate(czm_ul,-czm_index*czm_imgWidth)
        }

        //把第一张图片克隆添加到最后一张
        var czm_firstLi = czm_ul.children[0];
        var czm_cloneLi = czm_firstLi.cloneNode(true);
        czm_ul.appendChild(czm_cloneLi);

        //开启定时器
        var czm_timerId = setInterval(function () {
            czm_right.click()
        },2500)

    </script>
</body>
</html>